<!-- eslint-disable vue/multi-word-component-names -->
<template>
    <v-layout v-if="isLoading">
        <div style="display: flex;justify-content: center;align-items: center;height: 100vh;width: 100%;">
            <v-progress-circular indeterminate size="50" color="blue" width="1"></v-progress-circular>
        </div>
    </v-layout>
    <v-layout v-else>
        <div style="width: 100%;background-color: rgb(239, 239, 239);padding: 10px;display: flex;">
            <div class="left-wrapper" v-if="students.length !== 0">
                <span class="title">待评价</span>
                <div class="container">
                    <el-select size="large" v-model="selected" placeholder="请选择...">
                        <el-option v-for="s in students" :key="s.id" :value="s.id" :label="s.name">
                        </el-option>
                    </el-select>
                </div>
                <div style="height: 3%;display: flex;align-items: center;">
                    <v-divider />
                </div>
                <div class="container" v-if="selected">
                    <span class="title">
                        思想道德:
                    </span>
                    <v-slider max="10" step="1" min="1" hide-details show-ticks="always" tick-size="4"
                        v-model="data.morality" :ticks="labels">
                        <template v-slot:prepend>
                            <v-text-field v-model="data.morality" style="width: 100px" density="compact" hide-details
                                variant="outlined" readonly>
                            </v-text-field>
                        </template>
                    </v-slider>
                </div>
                <div class="explaination" v-if="selected">
                    注：道德修养应考虑诚实守信，友爱团结，乐于奉献等方面
                </div>
                <div class="container" v-if="selected">
                    <span class="title">
                        学习态度:
                    </span>
                    <v-slider max="10" step="1" min="1" hide-details show-ticks="always" tick-size="4"
                        v-model="data.attitude" :ticks="labels">
                        <template v-slot:prepend>
                            <v-text-field v-model="data.attitude" style="width: 100px" density="compact" hide-details
                                variant="outlined" readonly>
                            </v-text-field>
                        </template>
                    </v-slider>
                </div>
                <div class="explaination" v-if="selected">
                    注：学习态度应考虑迟到早退情况，作业完成及批判思考等方面
                </div>
                <div class="container" v-if="selected">
                    <span class="title">
                        实践能力:
                    </span>
                    <v-slider max="10" step="1" min="1" hide-details show-ticks="always" tick-size="4"
                        v-model="data.practice" :ticks="labels">
                        <template v-slot:prepend>
                            <v-text-field v-model="data.practice" style="width: 100px" density="compact" hide-details
                                variant="outlined" readonly>
                            </v-text-field>
                        </template>
                    </v-slider>
                </div>
                <div class="explaination" v-if="selected">
                    注：实践能力应考虑志愿活动，社会实践参与等方面
                </div>
                <div style="width: 100%;display: flex;margin-top: 15%;justify-content: center;" v-if="selected">
                    <v-btn color="blue" @click="submitEstimation">提交评价</v-btn>
                </div>
                <div style="width: 100%;display: flex;align-items: center;justify-content: center;" v-else>
                    <span>请选择评价对象</span>
                </div>
            </div>
            <div class="left-wrapper" v-else>
                <span class="title">待评价</span>
                <div style="height: 100%;width: 100%;display: flex;align-items: center;justify-content: center;">
                    <span>暂无需评价内容</span>
                </div>
            </div>
            <div style="width: 38%;margin-left: 2%;">
                <div style="background-color: white;padding: 15px;height: 40vh;">
                    <span class="title">我的评分</span>
                    <div style="height: 3%;display: flex;align-items: center;">
                        <v-divider />
                    </div>
                    <div class="container">
                        <span class="subtitle">
                            思想道德:
                            <span class="content">{{ useEstimationStore().moral }}</span>
                        </span>
                    </div>
                    <div class="container">
                        <span class="subtitle">
                            学习态度:
                            <span class="content">{{ useEstimationStore().attitude }}</span>
                        </span>
                    </div>
                    <div class="container">
                        <span class="subtitle">
                            实践能力:
                            <span class="content">{{ useEstimationStore().practice }}</span>
                        </span>
                    </div>
                    <div class="container">
                        <span class="subtitle">
                            综合评分:
                            <span class="content">{{ useEstimationStore().total }}</span>
                        </span>
                    </div>
                </div>
                <div style="margin-top: 5vh;height: 35vh;padding-top: 2%;padding-left: 2%;background-color: white">
                    <EstimationChart width="100%" height="280px" />
                </div>
            </div>
        </div>
    </v-layout>
</template>
<script setup lang="ts">
import EstimationChart from '@/components/chart/EstimationChart.vue';
import { Estimate, GetToEstimation } from '@/controllers/userController';
import { useEstimationStore } from '@/stores';
import { message, messageConfirm } from '@/utils/message';
import { onMounted } from 'vue';
import { reactive } from 'vue';
import { ref } from 'vue'
let selected = ref(undefined as any)
let students = ref([] as { id: number; name: string }[])
let data = reactive({
    morality: 5,
    attitude: 5,
    practice: 5
})
let isLoading = ref(false)
const labels = {
    1: '差',
    3: '较差',
    5: '一般',
    7: '较好',
    10: '好'
}

onMounted(() => {
    init()
})
async function submitEstimation() {
    messageConfirm('确认提交当前评价吗?').then(
        () => estimate()
    ).catch(
        () => { return }
    )
}
async function init() {
    isLoading.value = true
    try {
        await useEstimationStore().init()
        students.value = await GetToEstimation()
    } catch (error: any) {
        message(error.message, 'error')
    }
    finally {
        isLoading.value = false
    }
}
async function estimate() {
    if (!selected.value) {
        message('请选择评价对象')
        return
    }
    try {
        await Estimate(selected.value, data.morality, data.attitude, data.practice)
        students.value = await GetToEstimation()
        selected.value = undefined
        message('评价成功!', 'success')
    } catch (error: any) {
        message(error.message, 'error')
    }
}
</script>
<style scoped>
.left-wrapper {
    background-color: white;
    width: 60%;
    padding: 15px;
    height: 80vh;
}

.title {
    font-size: 18;
    font-weight: bold;
    color: #333;
    margin-right: 1%;
}

.subtitle {
    font-size: smaller;
    margin-left: 10%;
    margin-bottom: 5%;
}

.container {
    margin-top: 1%;
    display: flex;
    max-width: 90%;
    align-items: center;
}

.content {
    font-size: x-large;
    font-weight: 600;
    margin-left: 2px;
}

.explaination {
    font-size: small;
    color: gray;
    margin-top: 1%;
    margin-bottom: 5%;
}
</style>